<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>kq.1.08.js</title>
<script type="text/javascript" src="../kq.dev.js"></script>
</head>

<body>
<div id="div">我是#div</div>
<div class="div">
	<div class="div2">我的.div的第一个孩子</div>
    <div class="div2" id="div2">2</div>
    <div class="div2">我的.div的最后一个孩子</div>
</div>
<div id="divbox">我是#divbox</div>
<hr />
<div id="click">点我测试click</div>
<hr />
<form id="formBox" onsubmit="return false">
	<input id="inputBox" />
</form>
<img onclick="showImg()" width="200" src="http://sunac.kuoqi.com/upload/jpeg/220825/4e9eb7636c7ac7220f41e6be7caaa7a8.jpeg" />
<hr />
<button id="card">创建卡片</button>
<button id="alert">alert弹窗</button>
<button id="confirm">confirm弹窗</button>
<button id="prompt">prompt弹窗</button>
<button id="loading">loading</button>
<button id="loadpage">loadpage</button>
<button id="loadinnerpage">loadinnerpage</button>
<hr />
<form class="form" onsubmit="return false;">
	<div class="row-flex">
    	<div class="col-auto">常规input：</div>
        <div class="col-other"><input class="form-input" name="input" data-type="require" value="12" /></div>
    </div>
    <div class="row-flex">
    	<div class="col-auto">常规checkbox：</div>
        <div class="col-other">
        	<input type="checkbox" name="checkbox[]" value="1" />
        	<input type="checkbox" name="checkbox[]" value="2" />
        </div>
    </div>
    <div class="row-flex">
    	<div class="col-auto">常规radio：</div>
        <div class="col-other">
        	<input type="radio" name="radio" value="1" />
        	<input type="radio" name="radio" value="2" />
        </div>
    </div>
    <div class="row-flex">
    	<div class="col-auto">常规单文件：</div>
        <div class="col-other">
        	<input class="form-input" type="file" name="file" value="12" />
        </div>
    </div>
    <div class="row-flex">
    	<div class="col-auto">常规多文件：</div>
        <div class="col-other">
        	<input class="form-input" type="file" multiple="multiple" name="files" value="12" />
        </div>
    </div>
    <div class="row-flex">
    	<div class="col-other">
        	<button class="form-button" type="submit">提交</button>
        </div>
    </div>
    <div class="row-flex">
    	<div class="col-other">
        	<div id="form-result"></div>
        </div>
    </div>
</form>
</body>
<script>
var img = null;
	function showImg(){
		img = new $Q.plugIn.image({
			data:[
				'http://sunac.kuoqi.com/upload/jpeg/220825/4e9eb7636c7ac7220f41e6be7caaa7a8.jpeg'
			],	
		});
		img.show();
		console.log(img);	
	}
	//$Q('#div1').ready(function(){ console.log("122222222");	});
$Q(document).ready(function(){
	
	console.log('========常用选择器=========');
	console.log('.div 元素个数为 '+ $Q('.div').length);
	console.log('div 元素个数为 '+ $Q('div').length);
	console.log('#div 元素个数为 '+ $Q('#div').length)
	console.log('div.div2 元素个数为 '+ $Q('div.div2').length);
	$Q(window.document.getElementById("div"));
	console.log('元素#div的选择器测试通过');
	$Q(window.document.getElementsByClassName("div2"))
	console.log('元素.div2的选择器 测试通过');
	$Q('#divbox');
	$Q('<div>测试一下</div>');
	console.log('选择器字符串 测试通过');
	console.log('伪类选择器[div:first]选择元素为：'+$Q('div:first').length);
	console.log('伪类选择器[div:last]选择元素为：'+$Q('div:last').length);
	console.log('伪类选择器[div:eq(3)]选择元素为：'+$Q('div:eq(3)').length);
	console.log('伪类选择器[div:neq(3)]选择元素为：'+$Q('div:neq(3)').length);
	console.log('伪类选择器[div:firstChild]选择元素为：'+$Q('div:firstChild').length);
	console.log('伪类选择器[div:lastChild]选择元素为：'+$Q('div:lastChild').length);
	
	console.log('========常用方法=========');
	console.log('$Q("div.div").children()：'+$Q("div.div").children());
	console.log('$Q("div.div").children().length：'+$Q("div.div").children().length);
	console.log('$Q("div.div").children("div:eq(2)").length：'+$Q("div.div").children("div:eq(2)").length);
	console.log('$Q("div.div").parent().length: '+$Q("div.div").parent().length);
	console.log('$Q("div.div").find(".div2").length：'+$Q('div.div').find('.div2').length);
	console.log('$Q("div.div2").first().length：'+$Q("div.div2").first().length);
	console.log('$Q("div.div2").last().length：'+$Q("div.div2").last().length);
	console.log('$Q("div.div2").firstChild().length：'+$Q("div.div2").firstChild().length);
	console.log('$Q("div.div2").lastChild().length：'+$Q("div.div2").lastChild().length);
	console.log('$Q("#divbox").width()：'+$Q("#divbox").width());
	console.log('$Q("#divbox").height()：'+$Q("#divbox").height());
	console.log('$Q("#divbox").text()：'+$Q("#divbox").text());
	console.log('$Q("#divbox").html()：'+$Q("#divbox").html());
	console.log('$Q("#divbox").hide()：'+$Q("#divbox").hide());
	console.log('$Q("#divbox").show()：'+$Q("#divbox").show());
	
	console.log('========上下级关系=========');
	console.log('$Q("#div2").before().text()：'+$Q("#div2").before().text());
	console.log('$Q("#div2").after().text()：'+$Q("#div2").after().text());
	console.log('$Q(".div").prev().text()：'+$Q(".div").prev().text());
	console.log('$Q(".div").next().text()：'+$Q(".div").next().text());
	
	console.log('$Q(".div").moveToNext()：'+$Q(".div").moveToNext());
	console.log('$Q(".div").moveToPrev()：'+$Q(".div").moveToPrev());
	console.log('========attr属性测试=========');
	if(!$Q('#div').hasAttr("data-init")){
		$Q('#div').setAttr("data-init","attr属性测试完成");
	}
	console.log($Q('#div').getAttr("data-init"));
	$Q('#div').removeAttr("data-init");
	console.log('========prop属性测试=========');
	if(!$Q('#div').hasProp("prop-init")){
		$Q('#div').setProp("prop-init","attr属性测试完成");
	}
	console.log($Q('#div').getProp("prop-init"));
	$Q('#div').removeProp("prop-init");
	console.log('========data属性测试=========');
	if(!$Q('#div').hasData("data-init")){
		$Q('#div').setData("data-init","data属性测试完成");
	}
	console.log($Q('#div').getData("data-init"))
	$Q('#div').removeData("data-init");
	console.log('========表单方法=========');
	console.log('$Q("#formBtn").submit()：'+$Q("#formBtn").submit());
	console.log('$Q("#inputBox").val()：'+$Q("#inputBox").val());
	var dom = $Q('.div').eq(1);
	dom = $Q('.div').clone(dom);
	$Q(dom).removeClass("div");
	$Q(dom).empty();
	$Q(dom).text('我是新加进来的');
	$Q(dom).css("background-color","#d00");
	$Q('.div').append($Q(dom));
	$Q('.div').prepend($Q(dom.clone()));

	console.log('========事件方法=========');
	$Q('#click').click(function(){
		console.log("click事件测试通过");
	});
	$Q('#click').click();
	$Q('#click').change(function(){
		console.log("change事件测试通过");
	});
	$Q('#click').change();
	$Q('#inputBox').focus(function(){
		console.log("focus事件测试通过");
	});
	$Q('#inputBox').focus();
	console.log('========卡片部分测试=========');
	var card = null;//卡片的模块信息
	$Q('#card').click(function(){
		//c:[c,t,r,b,l,tr,tl,br,bl];
		card = $Q.card({
			content:'<div>这个是常规卡片</div>',
			position:'c',
			tips:'测试卡片',
			width:'600px',
			height:400,
			cancel:function(){
				console.log($Q.msg("卡片关闭"));	
			},
		});
		console.log(card);
	});
	$Q('#alert').click(function(){
		$Q.alert({
			title:'alert',
			text:'测试alert',
			cancel:function(){ $Q.msg("alert关闭")}
		});
	});
	$Q('#confirm').click(function(){
		$Q.confirm({
			title:'confirm',
			text:'测试confirm',
			sure:function(){
				$Q.msg("confirm执行成功")	;
			},
			cancel:function(){ $Q.msg("confirm关闭")}
		});
	});
	$Q('#prompt').click(function(){
		$Q.prompt({
			title:'prompt',
			text:'测试prompt',
			sure:function(){
				$Q.msg("prompt执行成功")	;
			},
			cancel:function(){ $Q.msg("prompt关闭")},
			checkValied:function(code){
				$Q.msg("检测内容的信息为："+code);
				return true;
			}
		});
	});
	//loading
	$Q('#loading').click(function(){
		$Q.loading(true);
		setTimeout(function(){
			$Q.loading(false);
		},5000);	
	});
	$Q('#loadpage').click(function(){
		$Q.loadpage({
			url:'',
		});
	});
	$Q('#loadinnerpage').click(function(){
		$Q.loadpage({
			url:'',
			tips:'测试一下',	
			width:'400px',
			height:'400px',
		});	
	});
	
	console.log('==========表单提交的相关模块================');
	$Q('.form').submit(function(){
		try{
			if($Q(this).isValid()){
				//判定表单是否验证成功
				$Q.msg("验证数据成功");
			}else{
				console.log($Q(this).prop('focusElement'));
				console.log("验证失败");	
				$Q.msg("验证数据失败,失败类型:"+$Q($Q(this).prop('focusElement')).getData("type"));
			}
			var data = $Q(this).getFormdata();//获取当前表单的数据信息
			console.log(data);
			//异步快速提交表单
			$Q(this).ajaxSubmit({
				action:'http://api.kuoqps.cn/index/debug',	
			});
			$Q('#form-result').ajaxConts({
				action:'http://api.kuoqps.cn/index/debug'
			});
		}catch(err){ console.log(err);}
	});
});
</script>
</html>
